<template>
  <div>
    <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        style="margin-top: 0px; line-height: 10px;margin-left: 25px"
    >
      <el-form-item label="病人姓名">
        <el-input
            v-model="formInline.userName"
            placeholder="病人姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label=" 病房分类">
        <el-select v-model="formInline.wardType" placeholder="病房分类">
          <el-option
              v-for="ward in wardType"
              :key="ward.id"
              :label="ward.wardType"
              :value="ward.wardType"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="select">查询</el-button>

        <el-button type="danger" plain @click="resetForm">重置
        </el-button>
      </el-form-item>
      <el-card class="box-card-wardView">
        <p style="padding:10px;margin-left:15px;">普通病房</p>
        <p style="padding:10px;margin-left:15px;">剩余：{{ wardRemainingProportion.ptcount }}</p>
        <el-progress type="circle" :percentage="wardRemainingProportion.pt"></el-progress>
        <p style="padding:10px;margin-left:15px;">高级病房</p>
        <p style="padding:10px;margin-left:15px;">剩余：{{ wardRemainingProportion.gjcount }}</p>
        <el-progress
            type="circle"
            :percentage="wardRemainingProportion.gj"
            color="rgb(20, 189, 133)"
        ></el-progress>
        <p style="padding:10px;margin-left:15px;">隔离病房</p>
        <p style="padding:10px;margin-left:15px;">剩余：{{ wardRemainingProportion.glcount }}</p>
        <el-progress
            type="circle"
            :percentage="wardRemainingProportion.gl"
            color="orange"
        ></el-progress>
        <p style="padding:10px;margin-left:15px;">重症监护室</p>
        <p style="padding:10px;margin-left:15px;">剩余：{{ wardRemainingProportion.icucount }}</p>
        <el-progress
            type="circle"
            :percentage="wardRemainingProportion.icu"
            color="red"
        ></el-progress>
      </el-card>
    </el-form>
    <el-card class="box-card-wardViewThree">
      <el-table
          border
          text-align: center
          :cell-style="{ padding: '7px' }"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :row-class-name="tableRowClassName"
      >
        <el-table-column prop="id" label="住院编号"></el-table-column>
        <el-table-column prop="patient_id" label="病历编号"></el-table-column>
        <el-table-column prop="ward_type" label="病房类型"></el-table-column>
        <el-table-column prop="department_name" label="所属科室"></el-table-column>
        <el-table-column prop="name" label="病人姓名"></el-table-column>
        <el-table-column prop="gender_name" label="病人性别"></el-table-column>
        <el-table-column prop="data_birth" label="病人年龄"></el-table-column>
        <el-table-column prop="mobile" label="联系电话"></el-table-column>
        <el-table-column prop="result" label="诊断结果"></el-table-column>
        <el-table-column prop="doctor_name" label="负责医生"></el-table-column>
        <el-table-column prop="hospital_time" label="入住时间" width="100">
        </el-table-column>
        <el-table-column prop="time_length" label="入住时长(天)">
        </el-table-column>
        <el-table-column fixed="right" label="出院" width="100">
          <template slot-scope="scope">
            <el-button
                el-button
                type="success"
                icon="el-icon-check"
                circle
                @click="outWard(scope.row)"
                size="small"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
        background
        layout="prev, pager, next,total"
        :total=departmentPageDto
        :page-size=filter.size
        style="position: absolute; margin-left: 700px; margin-top: 30px"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        'id':'1',
        'patient_id':'1',
        'ward_type':'儿童死亡芭比粉',
        'department_name':'儿童口腔',
        'name':'傻呗徐炎',
        'gender_name':'女',
        'data_birth':'2',
        'mobile':'19558253966',
        'result':'没救了等死吧',
        'doctor_name':'方磊',
        'hospital_time':'2023-7-19',
        'time_length':'1'
      }],
      user: {},
      formInline: {
        userName: "",
        wardType: "",
      },
      judge_user: [],
      wardType: [],
      pageTotal: "",
      departmentPageDto: {},
      wardRemainingProportion: {
        pt: "",
        gj: "",
        gl: "",
        icu: "",
        ptcount: "",
        gjcount: "",
        glcount: "",
        icucount: "",
      },
      filter: {
        size: 3,       // 单页数据量
        page: 1,
      },
    };
  },
  created() {
    this.$axios.get(this.$settings.BASE_URL + 'registered/detailed_list/').then(response => {
      this.judge_user = response.data.results
    })

    let init_num = 100
    // 查询数据库中每个病房类型的个数
    this.$axios.get(this.$settings.BASE_URL + 'system/ward_num/').then(response => {
      for (let dict of response.data) {
        if (dict.ward_type === 1) {
          this.wardRemainingProportion.ptcount = init_num - dict.num
          this.wardRemainingProportion.pt = init_num - dict.num
        } else if (dict.ward_type === 2) {
          this.wardRemainingProportion.gjcount = init_num - dict.num
          this.wardRemainingProportion.gj = init_num - dict.num
        } else if (dict.ward_type === 3) {
          this.wardRemainingProportion.glcount = init_num - dict.num
          this.wardRemainingProportion.gl = init_num - dict.num
        } else {
          this.wardRemainingProportion.icucount = init_num - dict.num
          this.wardRemainingProportion.icu = init_num - dict.num
        }
      }
    })
    // 获取数据
    this.$axios.get(this.$settings.BASE_URL + 'patient/get_hospital/').then(response => {
      this.tableData = response.data.results
      this.departmentPageDto = response.data.count
    })
    this.user = this.$getSessionStorage("user");
    // this.selectWardRemainingProportion();
    // this.paging(1);
    // this.selectWardType();
  },
  methods: {
    select(pageNum) {
      //axios查询待住院列表请求(分页有参)
      if (isNaN(pageNum) == true) {
        pageNum = 1;
      }
      this.$axios
          .post("/ward/selectWardList", {
            userName: this.formInline.userName,
            wardType: this.formInline.wardType,
            pageNum: pageNum,
          })
          .then((Response) => {
            this.tableData = Response.data.list;
            this.departmentPageDto = Response.data;
            console.log(this.departmentPageDto);
          })
          .catch((error) => {
            console.error(error);
          });
    },
    selectWardType() {
      //axios查询病房类型请求
      this.$axios
          .post("/ward/selectWardType")
          .then((Response) => {
            this.wardType = Response.data;
          })
          .catch((error) => {
            console.error(error);
          });
    },
    handleSelectionChange(val) {
      this.select(pageNumber);
    },
    resetForm() {
      location.reload();
    },
    paging(pageNum) {
      //axios查询待病房列表请求(分页无参)
      this.$axios
          .post("/ward/selectWardList", {
            pageNum: pageNum,
          })
          .then((Response) => {
            this.tableData = Response.data.list;
            this.departmentPageDto = Response.data;
            console.log(this.departmentPageDto);
          })
          .catch((error) => {
            console.error(error);
          });
    },
    handleCurrentChange(pageNumber) {
      this.select(pageNumber);
    },
    selectDepartmentClassification() {
      //axios查询科室分类请求
      this.$axios
          .post("/department/selectDepartmentClassification")
          .then((Response) => {
            this.departmentClassification = Response.data;
            console.log(this.departmentClassification);
          })
          .catch((error) => {
            console.error(error);
          });
    },
    selectWardRemainingProportion() {
      //axios查询病房剩余占比（数据可视化）
      this.$axios
          .post("/ward/selectWardRemainingProportion")
          .then((Response) => {
            this.wardRemainingProportion = Response.data;
          })
          .catch((error) => {
            console.error(error);
          });
    },
    open() {
      this.$confirm('请先前往缴费平台缴清费用, 是否跳转?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push({path: '/index/paymentPlatform'})
      }).catch(() => {
        this.$notify({
          title: '提醒',
          message: '请尽快前往缴费平台缴清费用',
          type: 'info',
        })
      });
    },
    outWard(row) {
      this.$confirm("确认出院？")
          .then((_) => {
            for (let dict of this.judge_user) {
              if (dict.patient_name === row.name || dict.status_name === '未缴费') {
                this.open()
              } else {
                //axios出院请求
                this.$axios.delete(this.$settings.BASE_URL + `patient/hospital_info/${row.id}`).then((Response) => {
                  if (Response.data == "SUCCESS") {
                    this.$message({
                      message: '出院成功,愿你身体健康',
                      type: 'success',
                      duration: 1000
                    })
                    location.reload();
                  } else {
                    alert("出院请求失败！");
                  }
                }).catch((error) => {
                  console.error(error);
                });
              }
            }
          })
          .catch((_) => {
          });
    }
    ,
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  },
}
;
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card-wardView {
  flex: auto;
  position: absolute;
  margin-left: 1500px;
  margin-top: -50px;
  width: 168px;
}

.box-card-wardViewThree {
  margin-top: 0px;
  width: 1500px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #409eff;
}
</style>